<template>
  <div id="homeBody">
    <div class="router">
      <RouterView v-slot="{ Component }">
        <keep-alive include="news,imgs">
          <component :is="Component" />
        </keep-alive>
      </RouterView>
    </div>
    <var-bottom-navigation
      v-if="tarBar.includes(route.path)"
      v-model:active="active"
      class="navbar"
    >
      <var-bottom-navigation-item
        label="新闻"
        @click="goRouter('/news')"
        icon="home"
      />
      <var-bottom-navigation-item
        label="萌虎"
        @click="goRouter('/img')"
        icon="notebook"
      />
      <var-bottom-navigation-item
        label="图库"
        @click="goRouter('/img2')"
        icon="image"
      />
      <var-bottom-navigation-item
        label="我的"
        @click="goRouter('/my')"
        icon="account-circle"
      />
    </var-bottom-navigation>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const tarBar = ['/news', '/img', '/img2', '/my']
const active = ref(0)
const goRouter = (path: string) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
#homeBody {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;

  .router {
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
  }
}
</style>
